import React, { Component,useState } from 'react'
import { View, Text,Input,Button,EventProps,Checkbox,Label,checkboxGroup } from '@tarojs/components'
import './index.scss'
import {InputProps} from '@tarojs/components/types/Input'
import {checkboxGroupProps} from '@tarojs/components/types/CheckboxGroup'


export default ()=>{
  const [newTodoText,setNewTodoText] = useState('')
  const [todoList, setTodoList] = useState<{
  text:string,
  isComplete:boolean
}[]>([])

  const handleInput :InputProps['onInput'] = e =>{
    setNewTodoText(e.detail.value)
  }
  const handleClick :EventProps['onClick'] = () => {
    setTodoList(prevList=>{
      return [...prevList,{
        text:newTodoText,
        isComplete:false
      }]
    })
    setNewTodoText('')
  }
  const handleCheck :CheckboxGroupProps['onChange'] = e => {
    //e.detail.value
    setTodoList(prevList =>{
      return prevList.map(item => {
        return {
          text:item.text,
          isComplete:e.detail.value.indexOf(item.text) > -1
        }
      })
    })
  }

  return (
    <View>
      <View>
        <CheckboxGroup onChange={handleCheck}>
            {todoList.map(item=>{
              return (
                <View key={item.text}>
                  <Label className={item.isComplete ? 'complete':''}>
                      <Checkbox value={item.text} />
                      <Text>{item}</Text>
                  </Label>
                </View>
              )
            })}
          </CheckboxGroup>
      </View>

      <Input value={newTodoText} onInput={handleInput} />
      <Button onClick={handleClick}>add todo</Button>

    </View>
  )
}
/* export default class Index extends Component {

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
      </View>
    )
  }
} */
